<template>
  <el-container>
    <el-header style="background: #6ddaf1"
      ><img src="../assets/logo.jpg" style="height: 60px"
    /></el-header>
    <el-main>
      <el-tabs v-model="activeName">
        <el-tab-pane label="比赛" name="game">
          <component-game :gameDatas="gameDatas"></component-game>
        </el-tab-pane>
        <el-tab-pane label="数据榜" name="data-list">
          <component-data-list :gameDatas="gameDatas"></component-data-list>
        </el-tab-pane> </el-tabs
    ></el-main>
  </el-container>
</template>

<script>
import Game from '../components/Game.vue'
import DataList from './DataList.vue'

export default {
  components: {
    'component-game': Game,
    'component-data-list': DataList
  },
  data () {
    return {
      activeName: 'game',
      gameDatas: [],
      xlsUrls: []
    }
  },
  mounted () {
    this.loadFiles()
  },
  methods: {
    loadFiles () {
      const files = require.context('../assets/datas', false, /.(xls|xlsx)$/)
      var keys = files.keys()
      keys.sort((a, b) => {
        const aDate = a.substring(a.indexOf('/') + 1, a.lastIndexOf('.'))
        const bDate = b.substring(b.indexOf('/') + 1, b.lastIndexOf('.'))
        return Date.parse(aDate) - Date.parse(bDate)
      })
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        const element = require('../assets/datas/' + key.substring(key.lastIndexOf('/') + 1))
        this.xlsUrls.push(element)
      }
      this.getGameData(this.xlsUrls[this.xlsUrls.length - 1])
    },
    getGameData (url) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      const _this = this
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          var data = new Uint8Array(xhr.response)
          var XLSX = require('xlsx')
          var wb = XLSX.read(data, { type: 'array' })
          var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
          const gameData = outdata.map(item => {
            return {
              team: item.队伍,
              player: item.球星,
              score: item.进球 * 2 + item.三分进球,
              shots: item.出手,
              hits: item.进球,
              totalPointer: item.进球 + '/' + item.出手,
              // threeShots: item.三分出手,
              threeHits: item.三分进球,
              // threePointer: item.三分进球 + '/' + item.三分出手,
              efg: ((item.进球 + 0.5 * item.三分进球) / item.出手 * 100).toFixed(1) + '%',
              assists: item.助攻,
              rebounds: item.篮板,
              steals: item.抢断,
              fouls: item.犯规,
              blocks: item.盖帽,
              turnovers: item.失误
            }
          })
          const date = url.substring(url.lastIndexOf('/') + 1, url.indexOf('.'))
          _this.gameDatas.push({ date: date, gameData: gameData })
          _this.xlsUrls.splice(_this.xlsUrls.length - 1, 1)
          if (_this.xlsUrls.length > 0) {
            _this.getGameData(_this.xlsUrls[_this.xlsUrls.length - 1])
          }
        }
      }

      xhr.send()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
